<!DOCTYPE HTML>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport"
			content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
		<meta name="format-detection"
			content="telephone=no,email=no,date=no,address=no">
		<link type="text/css" rel="stylesheet"
			href="../c-asserts/mui/css/mui.min.css" />
		<link type="text/css" rel="stylesheet"
			href="../c-asserts/sui/sui1.0.1.css" />
		<link type="text/css" rel="stylesheet"
			href="../c-asserts/swiper/css/swiper.min.css" />
		<link type="text/css" rel="stylesheet"
			href="../c-asserts/swiper/swipierlis.css" />
		<style type="text/css">
.content-item {
	background-color: #ffffff;
}

.content-title {
	font-size: 16px;
	font-weight: 400;
}

.padding10px {
	padding: 10px;
}

.borderbuttom1pxgray {
	border-bottom: 1px solid #f4f4f4;
}

.content-box {
	border-bottom: 1px solid #f4f4f4;
}

.content-star-box {
	width: 100px;
	background-color: #c4c2c2;
}

.content-redtoole {
	width: 0px;
	height: 21px;
	background-color: #ff7720;
}

.content-star {
	width: 100px;
	background-image: url(../c-image/star.png);
	background-size: 100% 100%;
	background-position: center center;
	background-repeat: no-repeat;
	height: 21px;
}

.content-count {
	color: #ff7720;
	width: 50px;
	text-align: center;
	height: 21px;
	line-height: 23px;
}

.content-weizhi {
	text-align: right;
	color: #8f8f94;
	font-size: 14px;
}

.doorimg {
	width: 100px;
	height: 70px;
}

.doorimg img {
	width: 90px;
	height: 70px;
}

.door-name {
	font-size: 14px;
}

.content-type {
	color: #8f8f94;
	font-size: 14px;
}

.content-money {
	color: #ff7720;
	font-size: 14px;
}

.content-out {
	text-align: right;
	font-size: 14px;
	color: #8f8f94;
}

.margintop12 {
	margin-top: 12px;
}

.footer {
	text-align: center;
	padding-top: 40px;
	display: none;
}
</style>
	</head>
	<body>
		<div class="lisContent"></div>
		<div class="footer">
			<p>
				暂无数据
			</p>
		</div>
	</body>
	<script type="text/javascript" src="../c-script/jquery-2.1.3.min.js">
</script>
	<script type="text/javascript" src="../c-script/jquery.lazyload.min.js">
</script>
	<script type="text/javascript" src="../c-script/public.js">
</script>
	<script type="text/javascript" src="../c-script/template.js">
</script>
	<script type="text/javascript"
		src="../c-asserts/swiper/js/swiper.min.js">
</script>
	<script type="text/template" id="temp">
{{each list as val i}}
        <div class="content-item">
            {{if i == 0 || list[i].shopid != list[i-1].shopid }}
                <div class="padding10px borderbuttom1pxgray margintop12">
                    <div class="sui-flex-row">
                        <div class="content-title ">{{val.shopname}}</div>
                        <div class="sui-flex1 content-weizhi">{{val.area}} {{val.street}}</div>
                    </div>
                    <div></div>
                </div>
            {{/if}}
            <div class="content-box padding10px" data-frameId="{{val.themeid}}" onclick="toOptioninfo(this)">
                <div class="door-item sui-flex-row">
                    <div class="doorimg"><img class="lazyload" src="../c-image/loading.gif" data-original="{{val.coverimg}}"></div>
                    <div class="sui-flex1 sui-flex-col">
                        <div class="door-name">{{val.themename}}</div>
                        <div class="sui-flex1"></div>
                        <div class="sui-flex-row">
                            <div class="sui-flex1 content-type">{{val.content_}}</div>
                            <div class="content-money">￥{{val.displayprice}}</div>
                        </div>
                        <div class="sui-flex1"></div>
                        <div class="sui-flex-row">
                            <div class="content-star-box">
                                <div class="content-redtoole" data-width="{{val.evalstar}}"><div class="content-star"></div></div>
                            </div>
                            <div class="sui-flex1 content-out">已售：{{val.soldnum}}</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    {{/each}}
</script>
	<script type="text/javascript">
var pageindex; //当前页

var paramdata = {};

$(document).ready(function() {

		getDatalis(paramdata); //默认请求

		//下拉刷新
		/*
		api.setRefreshHeaderInfo({
			visible : true,
			bgColor : '#ccc',
			textColor : '#fff',
			textDown : '下拉刷新...',
			textUp : '松开刷新...',
			showTime : true
		}, function(ret, err) {
			//在这里从服务器加载数据，加载完成后调用api.refreshHeaderLoadDone()方法恢复组件到默认状态
			getDatalis(paramdata);
		});
		 */
		window.addEventListener({
			name : 'mainlis'
		}, function(ret, err) {
			alert("skdlfjslfkslfslf");
			var param = ret.value;
			getDatalis(param);
		});

	});

	//post.  请求后台数据
	function getDatalis(param) {
		paramdata = param;
		pageindex = 1;
		param.page = pageindex;
		param.pagesize = pagesize;
		// api.showProgress();
		callSvr("theme/find", param, function(ret, err) {
			// api.hideProgress();
			// api.refreshHeaderLoadDone();
			if (ret && ret.length > 0) {
				ret = reviewdata(ret);
				$('.lisContent').html(listoString(ret, $('#temp').html()));
				showfooter();
				if (ret.length == pagesize)
					scrolltobottom(param);
			} else
				hidenfooter();
		})
	}

	//加载更多
	function scrolltobottom(param) {
		window.addEventListener({
			name : 'scrolltobottom',
			extra : {
				threshold : 0
			}
		}, function(ret, err) {
			pageindex++;
			param.page = pageindex;
			callSvr("theme/find.json", param, function(ret, err) {
				if (ret && ret.length > 0) {
					ret = reviewdata(ret);
					$('.lisContent')
							.append(listoString(ret, $('#temp').html()));
					showfooter();
				}
			});
		});
		
	}

	//对数据的一些简单处理
	function reviewdata(data) {
		for (var i = 0; i < data.length; i++) {
			for (var l = 0; l < icontent.length; l++) {
				if (data[i].content == icontent[l].id)
					data[i].content_ = icontent[l].name + '，';
			}
			for (var j = 0; j < icategory.length; j++) {
				if (data[i].category == icategory[j].id)
					data[i].content_ += icategory[j].name;
			}
		}
		return data;
	}

	//对footer显示的一些处理  show
	function showfooter() {
		$('.footer').css('display', 'none');
		$('.content-redtoole').each(function(index, ele) {
			$(ele).css('width', $(ele).attr('data-width') * 20 + 'px');
		});
		$(".lazyload").lazyload();
	}

	//对footer隐藏的一些处理   hide
	function hidenfooter() {
		$('.lisContent').html('');
		$('.footer').css('display', 'block');
		/*
		api.removeEventListener({
			name : 'scrolltobottom'
		});
		*/
	}

	//打开主题详细
	function toOptioninfo(obj) {
		var themeid = $(obj).attr('data-frameId');
		location.href = "theme.html?themeid=" + themeid;
	}
</script>
</html>